<header class="flex mb-6">
  <h1 class="crayons-title">Feed Playground</h1>
</header>
<div class="crayons-card p-6 mb-6">
  <%= form_tag feed_playground_admin_tools_path do %>
    <div class="flex flex-col gap-4">
      <div class="crayons-field">
        <%= label_tag :config, "Config", class: "crayons-field__label" %>
        <%= text_area_tag :config, params[:config], placeholder: '{"description": ..., "order_by": ..., etc.}', size: "100x10", class: "crayons-textfield" %>
      </div>
      <div class="crayons-field">
        <%= label_tag :username, "User", class: "crayons-field__label" %>
        <%= text_field_tag :username, params[:username] || current_user.username, placeholder: "sloan", class: "crayons-textfield" %>
      </div>
      <div class="crayons-field">
        <%= label_tag :number_of_articles, "Number of articles", class: "crayons-field__label" %>
        <%= text_field_tag :number_of_articles, params[:number_of_articles] || 25, placeholder: "25", class: "crayons-textfield" %>
      </div>
      <%= submit_tag :"Preview feed", class: "crayons-btn mr-auto" %>
    </div>
  <% end %>
</div>

<% if @user && @articles %>
  <header class="flex mb-6">
    <h2 class="crayons-subtitle-1">Feed Preview for <a href="/<%= @user.username %>">@<%= @user.username %></a></h2>
  </header>
  <div>
    <% Follow.follower_tag(@user.id).includes(:followable).order("points DESC").each do |follow| %>
      <a href="/t/<%= follow.followable.name %>" class="crayons-tag">
        <span class="crayons-tag__prefix">#</span><%= follow.followable.name %>: <%= follow.points.round(3) %>
      </a>
    <% end %>
  </div>

  <div class="articles-list mt-4" id="articles-list">
    <div class="substories" id="substories">
      <% @articles.each do |article| %>
        <%= render "articles/single_story", story: article.decorate, featured: article.main_image.present? %>
      <% end %>
    </div>
  </div>
<% end %>
